<template>
    <div class="main">
        <div class="top">
            <div class="head_div">
                <img src="http://static.ydcss.com/uploads/ydui/3.jpg" alt="" class="head_img">
            </div>
            <div class="name_div">
                <div style="font-size:130%">学生1</div>
                <div style="margin-top:.1rem;color:#ffffffd6">
                    <span>账号：</span>
                    <span>user1</span>
                </div>
            </div>
        </div>
        <div class="function">
            <yd-flexbox style="background-color:#fff;height:1rem">
                <yd-flexbox-item @click.native="routerJump('/wallet')">
                    <img src="../img/color_wallet.png" style="width:.5rem;height:.5rem;margin-left:.7rem;margin-top:.1rem">
                    <span class="text">钱包</span>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div class="line"></div>
        <div>
            <yd-flexbox style="background-color:#fff;height:1rem">
                <yd-flexbox-item @click.native="routerJump('/cardPackage')">
                    <img src="../img/color_package.png" style="width:.5rem;height:.5rem;margin-left:.7rem;margin-top:.1rem">
                    <span class="text">卡包</span>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div class="line"></div>
        <div>
            <yd-flexbox style="background-color:#fff;height:1rem">
                <yd-flexbox-item>
                    <img src="../img/card.png" style="width:.5rem;height:.5rem;margin-left:.7rem;margin-top:.1rem">
                    <span class="text">绑定</span>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div class="line"></div>
        <div class="function">
            <yd-flexbox style="background-color:#fff;height:1rem" @click.native="routerJump('/changePasswordFirst')">
                <yd-flexbox-item >
                    <img src="../img/changePassword.png" style="width:.5rem;height:.5rem;margin-left:.7rem;margin-top:.1rem">
                    <span class="text">修改密码</span>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div class="line"></div>
        <div>
            <yd-flexbox style="background-color:#fff;height:1rem">
                <yd-flexbox-item >
                    <img src="../img/setting.png" style="width:.5rem;height:.5rem;margin-left:.7rem;margin-top:.1rem">
                    <span class="text">设置</span>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div class="line"></div>
        <div class="function" @click="routerJump('/login')">
            <yd-flexbox style="background-color:#fff;height:1rem">
                <yd-flexbox-item >
                    <img src="../img/exit.png" style="width:.5rem;height:.5rem;margin-left:.7rem;margin-top:.1rem">
                    <span class="text">退出</span>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div class="line"></div>
    </div>
</template>
<script>
export default {
    name: 'Persional',
    data () {
        return {
            user: ''
        }
    },
    methods: {
        // 路由跳转
        routerJump (path) {
            this.$router.push(path)
        }
    }
}
</script>
<style scoped>
.main{ height: 90%; width: 100%; }
.top{ background-color: #00B2EE; height: 1.6rem; width: 100%; }
.head_div{width: 50px; height: 50px; border: 1px solid white; margin-top: 0.2rem; margin-left: 0.7rem; float: left;}
.name_div{float: left; margin-top: 0.3rem; margin-left: 0.5rem; color: white}
.head_img{width: 48px; height: 48px;}
.line { height: 1px; border-top: 1px solid rgb(235, 234, 234); text-align: center; }
.function{margin-top: .3rem;}
.text{position: relative; bottom:.15rem; left: .2rem; font-size: .3rem;}
</style>
